

// 模拟服务器上的传递过来的数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
  ]  //数组，每条数据是个对象



  /* 获取数据 */
  let apiLink=document.querySelector('.api-link')

  /*1. 遍历数组apitypeDate,把name属性值组装成html(a标签)代码，把组装好的
代码放进api-link */

let apiHtml=''; //定义一个变量来保存组装好的数据

apiTypeData.forEach(function(v){
    // console.log(v);

    //判断isnew为真，给他加active激活样式(类名)，加粗--三元运算符
    apiHtml+=` <a href="#" class="${ v.isnew ?'active': ''}"
     data-keyword="${v.keyword}">${v.name}</a>`  //把name属性值组装成html(a标签)代码

})
// console.log(apiHtml);打印出所有组装好的a标签

//将组装好的数据放进apiLink中
apiLink.innerHTML=apiHtml;




/* 2.利用事件委派，给api-link注册点击事件,将当前事件源的文本渲染到apiTips
获取当前事件源的自定义属性data-keyword，渲染到idcards */

let apiTips=document.querySelector('#apiTips')
let idcards=document.querySelector('#idcards')

apiLink.addEventListener('click',function(e){
    //筛选出事件源，筛选出触发事件的标签对象
    if(e.target.nodeName==='A'){
        //将当前事件源的文本渲染到apiTips
        apiTips.textContent=e.target.textContent

        //获取当前事件源的自定义属性data- keyword
        let keyword=e.target.dataset.keyword
        // console.log(keyword);

        //渲染到idcards
        idcards.placeholder=keyword
    }
})





